<template>
  <div id="demo">

    <div class="head hidden-xs-only">头部导航</div>
    <el-row :gutter="20">
      <el-col :xl='2' :lg='3' :md='4' :sm='6' :xs='12' >1</el-col>
        <el-col :xl='2' :lg='3' :md='4' :sm='6' :xs='12' >1</el-col>
          <el-col :xl='2' :lg='3' :md='4' :sm='6' :xs='12' >1</el-col>
          <el-col :xl='2' :lg='3' :md='4' :sm='6' :xs='12' >1</el-col>
              <el-col :xl='2' :lg='3' :md='4' :sm='6' :xs='12' >1</el-col>
                <el-col :xl='2' :lg='3' :md='4' :sm='6' :xs='12' >1</el-col>
                  <el-col :xl='2' :lg='3' :md='4' :sm='6' :xs='12' >1</el-col>
                    <el-col :xl='2' :lg='3' :md='4' :sm='6' :xs='12' >1</el-col>
                      <el-col :xl='2' :lg='3' :md='4' :sm='6' :xs='12' >1</el-col>
                      <el-col :xl='2' :lg='3' :md='4' :sm='6' :xs='12' >1</el-col>
                          <el-col :xl='2' :lg='3' :md='4' :sm='6' :xs='12' >1</el-col>

                            <el-col :xl='2' :lg='3' :md='4' :sm='6' :xs='12' >1</el-col>
                              <el-col :xl='2' :lg='3' :md='4' :sm='6' :xs='12' >1</el-col>
                                <el-col :xl='2' :lg='3' :md='4' :sm='6' :xs='12' >1</el-col>
                                  <el-col :xl='2' :lg='3' :md='4' :sm='6' :xs='12' >1</el-col>
    </el-row>

    <!-- <el-row :gutter="20">
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
</el-row> -->

  </div>
</template>

<script>
export default {
  name: 'Demo',
  data () {
    return {

    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.el-col{
  background: red;
  border: 1px solid black;
}
.head{
  width: 100%;
  height: 200px;
  background: red;
}

</style>
